<template>
  <div>
    <!-- ① 筛选区域 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="queryParams.dishName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="店铺名称：">
        <el-input v-model="queryParams.merchantName" placeholder="请输入店铺名称" clearable />
      </el-form-item>
      <el-form-item label="买家昵称：">
        <el-input v-model="queryParams.userName" placeholder="请输入买家昵称" clearable />
      </el-form-item>
      
      <el-form-item label="配送员：">
        <el-input v-model="queryParams.riderName" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="queryParams.phone" placeholder="请输入任意人手机号" clearable />
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-select v-model="queryParams.createTime" placeholder="全部" style="width: 150px">
          <el-option label="全部" value="" />
          <el-option label="本月内" value="this_month" />
          <el-option label="近三个月" value="last_3_months" />
          <el-option label="今年内" value="this_year" />
          <el-option label="2024年" value="2024" />
          <el-option label="2023年" value="2023" />
          <el-option label="2023年以前" value="before_2023" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态：">
        <el-select v-model="queryParams.deliveryStatus" placeholder="全部异常状态" style="width: 150px">
          <el-option label="全部"         value="" />
          <el-option label="待骑手接单"   value="1" />
          <el-option label="配送中"       value="2" />
          <el-option label="已送达"       value="3" />
          <el-option label="配送超时"     value="4" />
          <el-option label="待商家退款"   value="5" />
          <el-option label="商家拒绝退款" value="6" />
          <el-option label="商家成功退款" value="7" />
          <el-option label="交易成功"     value="8" />
          <el-option label="交易关闭"     value="9" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">清除条件</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- ② 表格 -->
  <div>
    <!-- 表头 -->
    <div class="order-table-header">
      <div class="col col-product">商品</div>
      <div class="col col-receiver">收货人</div>
      <div class="col col-delivery">配送员</div>
      <div class="col col-pay">应付款</div>
      <div class="col col-after-sale">售后</div>
      <div class="col col-status">交易状态</div>
      <div class="col col-action">操作</div>
    </div>

    <!-- 订单块 -->
    <div v-for="order in orderList" :key="order.orderBasic.id" class="order-block">
      <!-- 订单 meta -->
      <div class="order-meta">
        <span>订单号：{{ order.orderBasic.orderNo }}</span>
        <span>创建时间：{{ order.orderBasic.orderTime }}</span>
        <span>买家：{{ order.userInfo?.nickname || '—' }}</span>
        <span>门店：{{ order.merchant.name }}</span>
      </div>

      <!-- 单行展示 -->
      <div class="order-row">
        <!-- 商品列（内部循环菜品）-->
        <div class="col col-product">
          <div
            class="product-info"
            v-for="dish in order.dishes"
            :key="dish.name + dish.spec + dish.spiciness"
          >
            <img :src="dish.imageUrl || '/static/placeholder.png'" class="product-img" />
            <div>
              <div class="product-title">
                {{ dish.name }}
                <span class="product-qty">×{{ dish.quantity }}</span>
              </div>
              <div class="product-desc">
                规格：{{ dish.spec }}　辣度：{{ ['不辣','微辣','中辣','特辣'][dish.spiciness] }}
              </div>
              <div class="product-price">¥{{ dish.price }}</div>
            </div>
          </div>
        </div>

        <!-- 收货人 -->
        <div class="col col-receiver">{{ order.userInfo.nickname }}</div>

        <!-- 配送员 -->
        <div class="col col-delivery">
          <div class="rider-name">{{ order.rider?.name || '—' }}</div>
          <div class="rider-phone">{{ order.rider?.phone || '' }}</div>
        </div>

        <!-- 应付款 -->
        <div class="col col-pay">¥{{ order.orderBasic.totalAmount }}</div>

        <!-- 售后 -->
        <div class="col col-after-sale">—</div>

        <!-- 交易状态 -->
        <div class="col col-status">
          <div>{{ deliveryStatusText[order.orderBasic.deliveryStatus] || '未知状态' }}</div>
          <div
            v-if="order.orderBasic.exceptionStatus && order.orderBasic.exceptionStatus !== 0"
            class="exception-text"
            :class="{
              warn:   [1, 2, 3].includes(order.orderBasic.exceptionStatus),
              danger: [4, 5].includes(order.orderBasic.exceptionStatus)
            }"
          >
            <i class="el-icon-warning-outline" />
            {{ exceptionStatusText[order.orderBasic.exceptionStatus] }}
          </div>
        </div>

        <!-- 操作列 -->
        <div class="col col-action">
          <router-link
           class="action-link"
              :to="{ name: 'OrderDetail', params: { id: order.orderBasic.id } }"
          style="font-size: 14px; color: #409EFF;"
          >
                订单详情
          </router-link>

          <!-- 订单追踪（新增） -->
  <router-link
    class="action-link"
    :to="{ name: 'OrderTrack', params: { id: order.orderBasic.id } }"
    style="font-size: 14px; color: #409EFF;"
  >
    订单追踪
  </router-link>
          <el-link class="action-link" type="primary" :underline="false">调度跟踪</el-link>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        class="my-pagination"
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page-size="pageParams.pageSize"
        :current-page="pageParams.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :pager-count="5"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getOrderList } from '@/api/order'

/* 字典映射 */
const deliveryStatusText = {
  1: '待骑手接单',
  2: '配送中',
  3: '已送达',
  4: '配送超时',
  5: '待商家退款',
  6: '商家拒绝退款',
  7: '商家成功退款',
  8: '交易成功',
  9: '交易关闭'
}
const exceptionStatusText = {
  1: '未到店预警',
  2: '未离店预警',
  3: '未送达预警',
  4: '超时未到店',
  5: '超时未送达'
}

/* 列表 & 分页 */
const orderList   = ref([])
const total       = ref(0)
const loading     = ref(false)

const pageParams  = reactive({ pageNum: 1, pageSize: 5 })

/* 查询条件 */
const queryParams = reactive({
  orderNo: '',
  dishName: '',
  merchantName: '',
  userName: '',
  riderName: '',
  phone: '',
  createTime: '',
  deliveryStatus:'',
  exceptionStatus: ''
  
})

/* 获取数据 */
async function fetchOrderList () {
  loading.value = true
  console.log(toRaw(queryParams)) 
  try {
    const resp      = await getOrderList({ ...queryParams, ...pageParams })
    
    orderList.value = resp.data.records  || []
    total.value = resp.data.total ?? 0
  } finally {
    loading.value = false
  }
}

/* 事件 */
function handlePageChange (val) {
  pageParams.pageNum = val        // 直接改 pageNum
  fetchOrderList()
}

function handleSizeChange (val) {
  pageParams.pageSize = val       // 直接改 pageSize
  pageParams.pageNum  = 1         // 换页后回第一页
  fetchOrderList()
}
function handleSearch () {
  pageParams.pageNum = 1
  fetchOrderList()
}
function handleReset () {
  Object.keys(queryParams).forEach(k => (queryParams[k] = ''))
  pageParams.pageNum = 1
  fetchOrderList()
}

onMounted(fetchOrderList)
</script>

<style scoped lang="scss">



/* 交易状态颜色 */
.col-status {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .exception-text {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
    &.warn   { color: #e6a23c; }  /* 黄 */
    &.danger { color: #f56c6c; }  /* 红 */
  }
}

/* 操作列竖排 */
.col-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  .action-link { margin: 0; }
}

/* 配送员电话小字 */
.col-delivery .rider-phone {
  font-size: 12px;
  color: #888;
  line-height: 1.2;
}

/* 商品列内部小行间距 */
.product-info:not(:last-child) {
  margin-bottom: 12px;
}

/* 其余样式保持原样 ↓↓↓ */
.filter-form { margin-bottom: 20px; }

.order-table-header {
  display: flex;
  background: #f7f8fa;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 12px 0 12px 16px;
  margin-bottom: 4px;
}
.col {
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.col-product { flex: 2.5;
  min-width: 320px;

  /* 关键两句 */
  flex-direction: column;   /* 横排 ➜ 竖排 */
  align-items: flex-start;  /* 左对齐，看起来更整齐 */ 
}
.col-receiver,
.col-delivery,
.col-pay,
.col-after-sale,
.col-status,
.col-action {
   flex: 1; min-width: 120px; justify-content: center;/* 垂直方向居中 */
}


.order-block {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px #eee;
}
.order-meta {
  background: #f7f8fa;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 32px;
}
.order-row {
  display: flex;
  align-items: flex-start;
  padding: 16px 0 16px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.product-info  { display: flex; align-items: center; width: 100%; }
.product-img   { width: 60px; height: 60px; object-fit: cover;
                 margin-right: 16px; border-radius: 6px; border: 1px solid #eee; }
.product-title { font-weight: bold; margin-bottom: 4px; }
.product-desc  { color: #888; font-size: 13px; margin-bottom: 4px; }
.product-price { color: #333; font-weight: bold; }
.product-qty   { margin-left: 6px; color: #666; font-weight: 400; }

.pagination-wrapper { display: flex; justify-content: center; padding: 20px 0; }
.my-pagination {
  background: #fff; padding: 8px 20px; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  .el-pagination__sizes, .el-pagination__total,
  .el-pagination__jump, .btn-prev, .btn-next { margin: 0 4px; }
}
.my-pagination .el-pager li {
  margin: 0 4px; padding: 0 10px; border-radius: 8px; transition: all .2s;
  &:hover { background: rgba(64,158,255,.1); color: #409eff; }
  &.is-active { background: #409eff; color: #fff; }
}
.my-pagination .btn-prev,
.my-pagination .btn-next {
  border-radius: 8px; transition: all .2s;
  &:hover { background: rgba(64,158,255,.1); color: #409eff; }
}


</style>